<template>
	<view class="" style="background-color: transparent;">
		<u-modal
			v-model="tipShow"
			:title="tipTitle"
			:show-confirm-button="updateStatus == 0"
			:show-cancel-button="!enforce || updateStatus == 2"
			:async-close="true"
			@confirm="onTipConfirm"
			@cancel="onCancel"
		>
			<view class="modal_content" slot="default">
				<view class="text-666 text-ls text-center margin-bottom-xs">{{'V' + updateInfo.versionName}}</view>
				<rich-text class="updateLogs" :nodes="tipContent"></rich-text>
			</view>
			<view class="update-progress" v-if="updateStatus == 1">
				<!--  -->
				<view class="content">{{ progressContent }}</view>
				<u-line-progress :percent="percent" :show-percent="true" :striped="true" :striped-active="true"></u-line-progress>
			</view>
		</u-modal>
	</view>
</template>

<script>
export default {
	data() {
		return {
			tipShow: true, //更新提示
			tipContent: '',
			tipTitle: '检测到新版本',
			confirmShow: true,
			enforce: true, //是否强制
			progressShow: true,
			percent: 0,
			updateStatus: 0, //更新状态 0未更新 1 更新中 2 更新失败
			timer: null,
			progressContent: '正在下载更新包,请稍等...',
			updateInfo: {},
			type: ''
		};
	},
	watch: {
		/*  */
		updateStatus(newVal, oldVal) {
			if (newVal == 1 && oldVal == 0) {
				/* 更新下载状态 */

				if (this.type == 'wgt') {
					/* 热更 */
					this.appDownload(
						this.updateInfo.downloadUrlWgt,
						res => {
							this.$tools.installApk(
								res,
								() => {
									//成功
									console.log('安装成功');
									plus.runtime.restart();
								},
								() => {
									console.log('安装失败');
									this.updateStatus = 2;
								}
							);
						},
						error => {
							this.updateStatus = 2;
						}
					);
				} else {
					/* 全包 */
					/* 分平台 */
					if (this.updateInfo.platform == 'android') {
						this.appDownload(
							this.updateInfo.downloadUrlApp,
							res => {
								this.$tools.installApk(
									res,
									() => {
										//成功
										console.log('安装成功');
									},
									() => {
										console.log('安装失败');
										this.updateStatus = 2;
									}
								);
							},
							error => {
								this.updateStatus = 2;
							}
						);
					} else if (this.updateInfo.platform == 'ios') {
						/* ios */
						let iosUrl = 'itms-services:///?action=download-manifest&url=' + this.updateInfo.downloadUrlApp;

						plus.runtime.openURL(iosUrl, error => {
							console.log(error);
							this.updateStatus = 2;
						});
					} else {
						//其他情况不予更新
						this.updateStatus = 2;
					}
				}
			}
			if (newVal == 2) {
				/* 更新失败 */
				this.tipContent = '更新失败';
			}
		}
	},
	onLoad(params) {
		console.log(params);
		this.updateInfo = params;
		this.type = this.updateInfo.type;
		// 获取对应语言的内容
		this.tipContent = this.updateInfo.updateLog;
		this.enforce = this.updateInfo.enforce;
	},
	/* 回退监听 */
	onBackPress(event) {
		console.log(event.from);
		// return true;
		if (event.from === 'navigateBack') {
			return false;
		} else {
			return true;
		}
	},
	methods: {
		/* 弹窗确定 */
		onTipConfirm() {
			this.updateStatus = 1;
		},
		/* 退出 */
		onCancel() {
			uni.navigateBack({});
		},
		//安装wgt包
		appDownload(downloadUrl, callBack, errorCallBack) {
			console.log(downloadUrl);
			let opts = {};
			opts.url = downloadUrl;
			opts.success = res => {
				if (res.statusCode == 200) {
					//安装
					if (callBack) {
						callBack(res.tempFilePath);
					}
				}
			};
			//失败
			opts.fail = res => {
				console.log('======= xiazai失败');
				console.log(res);
				let code = res.errMsg;
				if (errorCallBack) {
					errorCallBack(code);
				}
				this.updateStatus = 2;
			};
			//结束
			opts.complete = res => {
				console.log('======= 请求结束');
			};
			const downloadTask = uni.downloadFile(opts);
			//下载进度
			downloadTask.onProgressUpdate(res => {
				this.percent = res.progress;
				// if(res.progress>50){
				// 	downloadTask.abort();
				// }
				if (this.percent >= 100) {
					this.progressContent = '安装中...';
				}
			});
		}
	}
};
</script>

<style lang="scss">
page {
	background: transparent;
}
.modal_content{
	padding: 20rpx;
	.updateLogs{
		line-height: 1.4;
		font-size: 26rpx;
		color: #333;
	}
}
.update-progress {
	margin: 50rpx 30rpx;
	width: inherit;
	// padding: 0 30rpx;
	.content {
		padding: 0 48rpx 48rpx 48rpx;
		font-size: 30rpx;
		text-align: center;
		color: $u-content-color;
	}
}
</style>
